<template>
	<view class="rank-page">
		<view class="rank-scroll">
			<view class="rank-head">
				<view class="item-name">合约名称</view>
				<view class="item-price">最新价</view>
				<view class="item-percent">涨跌幅</view>
				<view class="v-line"></view>
				<view class="item-interest">成交量</view>
			</view>
			<view class="rank-list">
				<view v-for="(item, key) in dataList" :key="key" class="rank-item thin-border__b" :class="{active: item.upOrDown > 0}">
					<view class="item-name">{{item.name}}</view>
					<view class="item-price">{{item.price}}</view>
					<view class="item-percent">
						<text class="price-limit">{{item.upOrDown}}%</text>
						<!-- <text v-else></text> -->
					</view>
					<view class="item-interest">{{item.hold}}</view>
				</view>
			</view>
			<!-- <view class="rank-foot--height"></view>
			<view class="rank-foot">
				<view class="foot-left" @click="setTypeKey(-1)">
					<view class="slw-icon foot-icon">&#xe67a;</view>
				</view>
				<view>
					<swiper :current="typeKey" :display-multiple-items="5" circular class="foot-swiper" @change="onChangeType">
						<swiper-item v-for="(item, key) in typeList" :key="key" class="foot-item" :class="{active: getPosition(item, key)}">
							<view class="item-title">{{item}}</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="foot-right" @click="setTypeKey(1)">
					<view class="slw-icon foot-icon">&#xe6a3;</view>
				</view>
			</view> -->
		</view>
		
		<!-- 底部分享弹窗 -->
		<float-layout-one ref="showtype" animation type="top" @change="changeTypeShow">
			<view class="type-list">
				<view v-for="(item, key) in types" :key="key" class="type-item border" :class="{active: type === key}" @click="onClickType(item, key)">
					<view class="type-box">
						<view class="type-name">{{item.name}}</view>
					</view>
				</view>
			</view>
		</float-layout-one>
	</view>
</template>

<script>
	import io from '@/static/socket.io.js'
	import { SOCKET_URL } from '@/config/index.js'
	import {toRankSearchPage} from '@/utils/PageRouter.js'
	import { getRankList, setRankList } from '@/utils/storage.js'
	import FloatLayoutOne from '@/components/custom-ui/float-layout/float-layout-one/index.vue'
    // import io from 'socket.io-client'
	// const socket = io('http://192.168.0.245:8083')
	const socket = io(SOCKET_URL)
	
	export default {
		components: { FloatLayoutOne },
		data() {
			const list = getRankList()
			return {
				isInit: true,
				dataList: list,
				typeKey: 0,
				typeList: ['沪深', '上证', '中证', '债五', '债十', '债二', '沪铜', '沪金', '沪银', '沪锌', '沪铝', '橡胶', '螺纹', '燃油'],
				type: 0,
				types: [
					// { name: '中期所', val: 0 },
					{ name: '上期所', val: 1 },
					{ name: '大商所', val: 2 },
					{ name: '郑商所', val: 3 }
				]
			}
		},
		onLoad() {
			if (this.dataList.length === 0) {
				uni.showLoading({ title: '加载中', mask: true })
			}
			uni.$on('page-popup', data => {
				if (data.show) {
					this.$refs['showtype'].open()
				} else {
					this.$refs['showtype'].close()
				}
			})
		},
		onShow() {
			this.getRank()
		},
		methods: {
			//	获取行情信息
			getRank () {
				const type = this.types[this.type]
				socket.on('connect', function(){
					
					socket.emit('joinQuotationGroup', {type: type.val})
				})
				
				socket.on('quotation', data => {
					if (this.isInit) {
						setRankList(data)
					}
					this.isInit = false
					this.dataList = data
					uni.hideLoading()
				})
				
				socket.on('disconnect', () => {
					this.dataList = []
					uni.hideLoading()
				})
				
				socket.on('connect_error', () => {
					this.dataList = []
					uni.hideLoading()
					// socket.disconnect()
				})
			},
			//	切换类型
			onClickType(item, key) {
				this.$refs['showtype'].close()
				this.type = key
				uni.$emit('sub-popup', {item, key})
				// uni.showLoading({ title: '加载中', mask: true })
				socket.emit('joinQuotationGroup', {type: item.val})
			},
			//	是否显示行情
			changeTypeShow(status) {
				if (!status.show) {
					uni.$emit('sub-popup', {})
				}
			},
			//	展开切换
			onSwitchType (item, key, bool) {
				this.$set(this.rankTypes, key, {...item, enable: bool})
			},
			onClickAddRank () {
				toRankSearchPage()
			},
			//	获取位置
			getPosition(item, key) {
				const {typeKey, typeList} = this
				const length = typeList.length
				const cur = typeKey + 2
				const ind = (length <= cur ? cur - length : cur)
				return key === ind
			},
			//	写入类型 key
			setTypeKey(num) {
				const {typeKey, typeList} = this
				const length = typeList.length
				const cur = typeKey + num
				const number = cur < 0  ? length - 1 : cur > length - 1 ? 0 : cur
				this.typeKey = number
			},
			//	改变时会触发 change 事件ss
			onChangeType(e) {
				const {current} = e.detail
				this.typeKey = current
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rank-page{
		/* #ifdef APP-PLUS */
		// height: 100vh;
		/* #endif*/
		
		/* #ifndef APP-PLUS */
		// height: calc(100vh - var(--window-bottom));
		/* #endif*/
		min-height: 100vh;
		background-color: #000;
		.rank-scroll{
			height: 100%;
		}
		
		.rank-head{
			color: #cdcdcd;
			height: 80rpx;
			display: flex;
			align-items: stretch;
			top: 0;
			left: 0;
			right: 0;
			z-index: 50;
			position: sticky;
			background: #636363;
			.item-name, .item-price, .item-percent, .item-interest{
				display: flex;
				padding: 0 20rpx;
				align-items: center;
			}
			.item-name{
				width: 25%;
				text-align: left;
				padding-left: 20rpx;
				background-color: #444;
			}
			.item-price{
				width: 25%;
				text-align: right;
				justify-content: flex-end;
				background-color: #444;
			}
			.item-percent{
				width: 25%;
				text-align: right;
				justify-content: center;
				background-color: #636363;
			}
			.item-interest{
				width: 25%;
				text-align: right;
				justify-content: center;
				background-color: #636363;
			}
		}
		.rank-list{
			.rank-item{
				height: 80rpx;
				display: flex;
				align-items: center;
				&:after{border-color: #1E1E1E;}
				&:last-child:after{display: none;}
			}
			.rank-item.active{
				.item-price, .item-percent{
					color: #C43223;
				}
				.price-limit{
					background: #CB1D14;
				}
			}
			.price-limit{
				color: #fff;
				padding: 4rpx 10rpx;
				background: #03B016;
				border-radius: 6rpx;
			}
			.item-name{
				width: 25%;
				color: #E5C147;
				text-align: left;
				padding-left: 20rpx;
			}
			.item-price{
				width: 25%;
				color: #00B34F;
				text-align: right;
			}
			.item-percent{
				width: 25%;
				color: #00B34F;
				text-align: right;
			}
			.item-interest{
				width: 25%;
				color: #A9A9A9;
				text-align: right;
				padding-right: 20rpx;
			}
		}
		
		.type-list{
			display: flex;
			flex-wrap: wrap;
			background-color: #000;
			.type-item.active{
				.type-name{color: #777;}
			}
			.type-item{
				width: 33.33%;
				height: 80rpx;
				position: relative;
				&:nth-child(3n) {
					&:after{border-right: none;}
				}
				&:nth-child(n + 4) {
					&:after{border-top: none;}
				}
				&:after{border-color: #6A6A6A;border-left: none;}
				.type-box{
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.type-name{
					color: #fff;
				}
			}
		}
		
		.rank-foot--height{height: 100rpx;}
		.rank-foot{
			left: 0;
			right: 0;
			bottom: 0;
			height: 100rpx;
			display: flex;
			position: fixed;
			align-items: stretch;
			background-color: #444;
			.foot-left, .foot-right{
				width: 100rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				.foot-icon{
					font-size: 48rpx;
				}
			}
			.foot-swiper{
				width: 550rpx;
				height: 100rpx;
			}
			.foot-item{
				color: #a9a9a9;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.foot-item.active{
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
</style>
